import { useState } from 'react'
import style from './work.module.css'

import { ManOutlined, EditOutlined,CustomerServiceOutlined ,QuestionCircleOutlined} from '@ant-design/icons'
// 图片
import calenderImg1 from '../../assets/Yiqixiu/calder1.png'
import calenderImg2 from '../../assets/Yiqixiu/calder2.png'

import CalendarData from '../../compoents/Calender/CalendarData';
import TrainData from '../../compoents/Train/TrainData';
// 页脚
import { Footer } from 'antd-mobile'
import YQTabData from '../../compoents/YQtabData/YQTabData';
import YQworksData from '../../compoents/YQWorks/YQworksData';
import YQBacklog from '../../compoents/YQbacklog/YQBacklog';
import YQSelect from '../../compoents/YQSelecte/Selected'
// 固定定位
import vips from '../../assets/create/vips.png'
import vips2 from '../../assets/create/vips2.png'
import vips3 from '../../assets/create/vips3.png'
import Ai from '../../assets/create/AI.png'
import { Tooltip } from 'antd';
import type { MenuProps } from 'antd';
import { Button, Dropdown, Space } from 'antd';
const text = <span>全场模版免费用</span>;
const items: MenuProps['items'] = [
  {
    key: '1',
    label: (
     <img src={Ai} alt="" />
    ),
  }
];

function Index() {
  // 日历框的显示和隐藏状态
  const [isVisible, setIsVisible] = useState(false)
  // 日历框显示
  const showCalist = () => {
    // 将 isVisible 状态设置为 true，显示日历框
    setIsVisible(true)
  }
  // 日历框隐藏
  const hideCalist = () => {
    // 应该设置为 false 以隐藏日历框
    setIsVisible(false)
  }
  return (
    <div className={style.container}>
      {/* 日历导航栏 */}
      <div className={style.nav}>
        <div className={style.vip}>
          <div className={style.vips}>
            <h3><ManOutlined /><EditOutlined /></h3>
            <div className={style.vips_center}>
              <p>低至<span>3.8</span>元/天</p>
              <p>
                <button>开通会员</button>
              </p>
            </div>
            <div className={style.vips_botm}>
              <p>开通会员，全场模版免费用</p>
              <p><span>查看会员特权&gt;</span></p>
            </div>
          </div>
        </div>
        <div className={style.calendar} onMouseEnter={showCalist} onMouseLeave={hideCalist}>
          <div className={style.calendar_top}>
            <div className={style.day}>
              <p><b>27</b>/9 2024</p>
              <p><span>周日 农历 八月二十</span></p>
            </div>
            <div className={style.day2}>
              <img src={calenderImg1} alt="" />
              <span>世界无车日</span>
            </div>
          </div>
          {
            isVisible && (
              //划过的日历表 
              < div className={style.calist}>
                {/* 日历 */}
                <div className={style.calendarlist}>
                  <CalendarData></CalendarData>
                </div>
                {/* 直通车 */}
                <div className={style.trian}>
                  <TrainData></TrainData>
                </div>
              </div>
            )
          }
          <div className={style.calendar_botm}>
            <p>
              <img src={calenderImg2} alt="" />
              <span>【一文看懂】全民国防教育主题宣传，线上答题就这么做&gt;&gt;</span>
            </p>
            <p>
              <img src={calenderImg2} alt="" />
              <span>【免费模板上新】国庆预热，歌咏朗诵、书法绘画等评比活动，点击开展&gt;&gt;</span>
            </p>
          </div>
        </div>
      </div>
      {/* 我的数据 */}
      <div className={style.mydata}>
        <YQTabData></YQTabData>
      </div>
      {/* 作品 */}
      <div className={style.works}>
        <YQworksData></YQworksData>
      </div>
      {/* 待办事项 */}
      <div className={style.backlog}>
        <YQBacklog></YQBacklog>
      </div>
      {/* 精选模版 */}
      <div className={style.temps}>
        <YQSelect></YQSelect>
      </div>
      {/* 页脚 */}
      <div className={style.footer}>
        <Footer content='©2024 eqxiu.com.All rights reserved北京中网易企秀科技有限公司'></Footer>
        <Footer content='电信与信息服务业务经营许可证：京1CP证160037号|京1CP备15056244号|京公网安备11010802018300|网信算备110108032561901240019号'></Footer>
      </div>
      <div className={style.calendar_fix}>
        <p>
           <Tooltip placement="left" title={text}>
<img src={vips} alt="" />
           </Tooltip>
          
        </p>
        <p>
           <Dropdown menu={{ items }} placement="right">
         <img src={vips2} alt="" />
      </Dropdown>
          
        </p>
        <p>
            <img src={vips3} alt="" />
        </p>
        <div className={style.vip1}>
           &nbsp;定制<br />
           &nbsp;设计
        </div>
        <div className={style.vip2}>
            &nbsp;&nbsp;<QuestionCircleOutlined style={{fontSize:'20px'}} />
            &nbsp;帮助
        </div>
        <div className={style.vip3}>
         &nbsp;&nbsp;<CustomerServiceOutlined style={{fontSize:'20px'}} />
            &nbsp;客服
        </div>
         <div className={style.vip3}>
            &nbsp;&nbsp;<EditOutlined style={{fontSize:'20px'}} />
            &nbsp;意见
        </div>
      </div>
    </div >
  )
}

export default Index
